import { Button, message, Spin, Tag } from 'antd';
import { useEffect, useState } from 'react';
import {} from '@ant-design/icons';
import { useMemo } from 'react';
import EasyMahjongGroup from 'components/Mahjong/easyGroup';
import { connect } from 'react-redux';

const DEFAULT_CONF = [
	{ label: '上一个', keyname: 'prev_key' },
	{ label: '下一个', keyname: 'next_key' },
	{ label: '复原', keyname: 'init_key' },
	{ label: '分割', keyname: 'split_key' },
	{ label: '出现听牌', keyname: 'linner_key' },
	{ label: '出现听牌(并判断)', keyname: 'message_linner_key' },
];
const mapStateToProps = ({ conf }: any) => conf;
export default connect(
	mapStateToProps,
	null
)(function (props: any) {
	const { prev_key, next_key, init_key, split_key, linner_key } = props;
	const [loading, setLoading] = useState(false);
	const [linnerKeys, setLinnerKeys] = useState<any>([]);
	const [groupInfo, setGroupInfo] = useState<any>({});
	const [current, setCurrent] = useState(1);
	const TITLE_CLASS = ' font-mono font-bold my-2';
	const BOX_CLASS = 'bg-blue-50 p-2 rounded ';
	function childrenfun({ data }: any) {
		setLoading(false);
		const { linnerKeys, current, groupInfo } = data;
		console.log({ data });
		groupInfo && setGroupInfo(groupInfo);
		linnerKeys && setLinnerKeys(linnerKeys);
		current && setCurrent(current);
	}

	useEffect(() => {
		window.addEventListener('message', childrenfun);
		return () => {
			window.removeEventListener('message', childrenfun);
		};
	}, []);

	const { cards } = groupInfo;
	return (
		<Spin tip='Loading...' spinning={loading} wrapperClassName=' p-2 text-base '>
			<p className={TITLE_CLASS}>快捷键：</p>
			<div className=' grid grid-cols-3 gap-2 '>
				{DEFAULT_CONF.map(({ label, keyname }) => (
					<div className={BOX_CLASS + 'text-center'}>
						<p>{label}</p>
						<Tag className='inline mr-0'>{props[keyname]}</Tag>
					</div>
				))}
			</div>
			<p className={TITLE_CLASS}>牌组信息：</p>
			<div className=' flex flex-col gap-2'>
				<p className={BOX_CLASS + ' '}>
					名称：{groupInfo.name} - {cards && cards[current - 1]?.name}
				</p>
				<p className={BOX_CLASS + ''}>
					当前页码：{current} / {cards?.length || 0}
				</p>
			</div>
			<p className={TITLE_CLASS}>可出牌：</p>
			<div className=' flex gap-2 overflow-x-scroll'>
				{linnerKeys.map((e: any) => (
					<div className={BOX_CLASS}>
						{EasyMahjongGroup({
							list: e.split(','),
						})}
					</div>
				))}
			</div>
		</Spin>
	);
});
